// 消息~~~消息
<template>
  <div class="home">
    <div class="home-home">
      <div><router-link to="/Home">《返回</router-link></div>
      <div>消息列表</div>
      <!-- <div class="S-dian"><span>。</span><span>...</span></div> -->
      <div></div>
    </div>
    <div class="home-header">
      <!-- @click="Xxaioxi" -->
      <div>
        <router-link to="/LiaoTime" id="xxo">消息</router-link>
      </div>
      <!-- @click="Ggonggao" -->
      <div>
        <router-link to="/Gonggao" id="xxo">公告</router-link>
      </div>
    </div>
    <div class="home-bbody">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Home",
  components: {},
  //开始创建组件之前，
  //在beforeCreate和created之前执行。创建的是data和method
  setup() {},
});
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255);
}
.home-home {
  width: 100%;
  height: 50px;
  background: blue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  color: #fff;
}
.home-home div {
  text-align: center;
  line-height: 30px;
  width: 70px;
  height: 30px;
  // background: rgb(204, 204, 231);
  font-weight: bolder;
  color: #fff;
}
.home-home div a {
  color: #fff;
}
.S-dian {
  width: 70px;
  height: 30px;
  background: #fff;
  // margin-right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px;
  padding: 0px 20px;
}
.S-dian span {
  color: #000;
}
.home-header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgb(255, 255, 255);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  color: rgb(0, 0, 0);
  border-bottom: 1px solid #ccc;
}
#xxo {
  color: #000;
}
.home-home div a {
  color: rgb(0, 0, 0);
}
.home-header div #xxo:hover {
  color: rgb(0, 199, 83);
}
.home-bbody {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  background: rgb(255, 255, 255);
}
</style>
